<template>
    <div>
        <van-nav-bar title="ViVO">
            <template #left>
                <van-icon name="wap-nav" size="20" />
            </template>
            <template #right>
                <van-icon name="search" size="20" />
            </template>
        </van-nav-bar>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 80%;height: 200px;" />
            </van-swipe-item>
        </van-swipe>
        <van-grid square>
            <van-grid-item v-for="item in catitems"  :icon="item.image_src" :text="item.name" />
             <van-grid-item v-for="item in catitems"  :icon="item.image_src" :text="item.name" />
        </van-grid>
        <div class="ms">
            <span1>距离本场结束</span1>:
            <span>08</span>:
            <span>24</span>:
            <span>{{ time }}</span>
           
        </div>
        <div class="list">
            <div style="width: 145px; height: 270px; "><img src="./img/xx.png" alt="" lazy-load>
                <span>闪充电线</span>
            </div>
            <div style="width: 145px; height: 210px; "><img src="./img/xx.png" alt="" lazy-load>
             <span>接口耳机</span></div>
            <div style="width: 145px; height: 171px; "><img src="./img/yy.png" alt="" lazy-load>
                <span>闪充电线</span>
            </div>
            <div style="width: 145px; height: 300px; "><img src="./img/yy.png" alt="" lazy-load>
             <span>接口耳机</span></div>
        </div>

    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import { ref } from 'vue';
import { catitemsApi } from '@/api/api';
let catitems=ref([])
catitemsApi().then(res=>{
    console.log('导航',res)
    catitems.value=res.data.message
})
let ms=ref(true)
let time=ref(30)
let timer
timer=setInterval(()=>{
    time.value--
    if(time.value>0){
        clearInterval(time)
        ms.value=false
    }
},1000)


</script>

<style lang="scss" scoped>
.ms{
    span{
        width: 20px;
        height: 20px;
        background-color: red;
    }
    
}
.list{
   column-count: 2;
   column-gap: 20px;
   div{
    margin-bottom: 20px;
    width: 100%;
   }
}
</style>